<template>
  <div class="dashboard-editor-container">
    <div v-show="authType === 'nomalAuth'" class="top-route-box">
      <div
        v-for="(item, index) in routeList"
        :key="index"
        :style="{ 'background-color': item.color }"
        @click="handleToRoute(item.path)"
      >
        {{ item.name }}
      </div>
    </div>
    <panel-group
      v-if="!!ACList & (authType !== 'nomalAuth')"
      :ac-data="ACList"
    />

    <div v-if="type !== 'root'" class="chart-box">
      <div class="tab-box">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClickTab">
          <el-tab-pane label="未读的消息" name="first">
            <div v-if="messageList.length === 0">
              <el-empty :image-size="100" description="暂无未读的消息" />
            </div>
            <div v-else class="collapse-box">
              <el-collapse v-model="collapse">
                <el-collapse-item
                  v-for="(item, index) in messageList"
                  :key="index + 100"
                  :title="formatDate(item.createtime)"
                  :name="index"
                  @click.native="handleRead(item.messId)"
                >
                  <div>
                    {{ item.messContent }}
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已读的消息" name="second">
            <div v-if="messageList.length === 0">
              <el-empty :image-size="100" description="暂无已读的消息" />
            </div>
            <div v-else class="collapse-box">
              <el-collapse>
                <el-collapse-item
                  v-for="(item, index) in messageList"
                  :key="index + 100"
                  :title="formatDate(item.createtime)"
                  :name="index"
                >
                  <div>
                    {{ item.messContent }}
                  </div>
                  <div>操作人: {{ item.operator }}</div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="message-page">
          <el-pagination
            small
            :current-page.sync="messageForm.pageNum"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="messageTotal"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <el-row class="chart-right-box">
        <div class="chart-top-box">
          <div>
            <span style="margin-right: 10px">类别:</span><el-select
              v-model="archCateCode"
              style="width: 130px"
              clearable
              placeholder="请选择"
              @change="handleChangeCategory"
            >
              <el-option
                v-for="item in options"
                :key="item.archCateCode"
                :label="item.archCateName"
                :value="item.archCateCode"
              />
            </el-select>
          </div>
          <div>
            <span style="margin-right: 10px; margin-left: 10px">日期:</span>
            <el-date-picker
              v-model="date"
              type="monthrange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              value-format="yyyyMM"
              :picker-options="pickerOptions"
              @change="handleChangeDate"
            />
          </div>
        </div>
        <line-chart :chart-data="lineChartData" />
      </el-row>
    </div>
    <div v-else>
      <el-row
        class="chart-right-box-first"
        :style="{ width: type !== 'root' ? '67%' : '' }"
      >
        <div class="chart-top-box">
          <div>
            <span style="margin-right: 10px">类别:</span><el-select
              v-model="archCateCode"
              style="width: 130px"
              clearable
              placeholder="请选择"
              @change="handleChangeCategory"
            >
              <el-option
                v-for="item in options"
                :key="item.archCateCode"
                :label="item.archCateName"
                :value="item.archCateCode"
              />
            </el-select>
          </div>
          <div>
            <span style="margin-right: 10px; margin-left: 10px">日期:</span>
            <el-date-picker
              v-model="date"
              type="monthrange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              value-format="yyyyMM"
              :picker-options="pickerOptions"
              @change="handleChangeDate"
            />
          </div>
        </div>
        <line-chart :chart-data="lineChartData" />
      </el-row>
    </div>
  </div>
</template>

<script>
import { getAllCategory } from '@/api/archCategory'
import { getArchMainByCate, getArchMainByMonth } from '@/api/archManage'
import { getMessageByUser, updateMessageState } from '@/api/user'
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'

export default {
  components: {
    PanelGroup,
    LineChart
  },
  data() {
    return {
      ACList: [],
      lineChartData: [],
      date: '',
      options: [],
      category: '',
      startDate: '',
      endDate: '',
      archCateCode: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '本月',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()])
            }
          },
          {
            text: '今年至今',
            onClick(picker) {
              const end = new Date()
              const start = new Date(new Date().getFullYear(), 0)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setMonth(start.getMonth() - 6)
              picker.$emit('pick', [start, end])
            }
          }
        ],
        disabledDate: (time) => {
          return time.getTime() > new Date().getTime()
        }
      },
      colorList: ['#81B8D8',
        '#589768',
        '#98C46D',
        '#CF74C4',
        '#5266BC',
        '#8358A9',
        '#D05D5D',
        '#E17A4D',
        '#ECC055'],
      authType: '',
      routeList: [
        {
          name: '存量档案归档',
          path: '/archManage/archManagement',
          color: '#81B8D8'
        },
        {
          name: '档案归档审核',
          path: '/archiveAuditing/archiveAuditing',
          color: '#589768'
        },
        {
          name: '档案借阅审核',
          path: '/myBriefcase/archBorrowAudit',
          color: '#98C46D'
        },
        {
          name: '档案知识化',
          path: '/archivesIntellectualization/index',
          color: '#CF74C4'
        },
        {
          name: '库房管理',
          path: '/warehouseManagement/index',
          color: '#5266BC'
        }

      ],
      staffCode: '',
      userInfo: {},
      messageForm: {
        pageNum: 1,
        pageSize: 10,
        state: 0
      },
      messageTotal: 0,
      activeName: 'first',
      messageList: [],
      type: '',
      collapse: []
    }
  },
  mounted() {
    this.getMessageByUser()
    this.getArchMainByCate()
    this.getAllCategory()
    this.getArchMainByMonth()
  },
  created() {
    this.authType = sessionStorage.getItem('authType')
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    this.type = this.userInfo.username
    this.staffCode = this.userInfo.username ? this.userInfo.username : this.userInfo.staffCode
  },
  methods: {
    formatDate(time) {
      const timestamp = new Date(time)
      const formattedDate = timestamp.toISOString().replace(/T/, ' ').replace(/\..+/, '')
      return formattedDate
    },
    // 点击跳转路由
    handleToRoute(path) {
      this.$router.push(path)
    },
    // 获取消息列表 type  1档案管理员 2员工 3主管
    getMessageByUser() {
      if (this.type !== 'root') {
        const type = this.userInfo.isManager ? 3 : (this.userInfo.rootType === 0 ? 1 : 2)
        const param = {
          username: this.staffCode,
          ...this.messageForm,
          type: type
        }
        getMessageByUser(param).then((res) => {
          if (res.code === '0') {
            this.messageList = res.data.records
            this.messageTotal = res.data.total
          }
        })
      }
    },
    // 根据档案类型查询已归档的档案数量
    getArchMainByCate() {
      getArchMainByCate({}).then((res) => {
        if (res.code === '0') {
          this.ACList = res.data
          if (this.ACList) {
            this.ACList.forEach((item, index) => {
              item.color = this.colorList[index % 9]
            })
          }
        }
      })
    },
    // 获取图标数据
    getArchMainByMonth() {
      getArchMainByMonth({
        archCateCode: this.archCateCode,
        startDate: this.startDate,
        endDate: this.endDate
      }).then((res) => {
        if (res.code === '0') {
          this.lineChartData = res.data
        }
      })
    },
    // 获取分类列表
    getAllCategory() {
      getAllCategory({
        pageNum: -1,
        pageSize: -1
      }).then((res) => {
        if (res.code === '0') {
          const list = [
            {
              archCateCode: '',
              archCateId: 16,
              archCateName: '全部'
            }
          ]
          this.options = list.concat(res.data.records)
        }
      })
    },
    // 点击切换日期
    handleChangeDate(value) {
      if (value) {
        this.startDate = value[0]
        this.endDate = value[1]
      } else {
        this.startDate = ''
        this.endDate = ''
      }
      this.getArchMainByMonth()
    },
    handleChangeCategory(value) {
      this.getArchMainByMonth()
    },
    // 点击切换消息tab
    handleClickTab(tab, event) {
      // 未读
      if (tab.index === '0') {
        this.messageForm.state = 0
        this.messageForm.pageNum = 1
        this.getMessageByUser()
        return
      }
      // 已读
      this.collapse = []
      this.messageForm.state = 1
      this.messageForm.pageNum = 1
      this.getMessageByUser()
    },
    // 点击页码
    handleCurrentChange(val) {
      this.messageForm.pageNum = val
      this.getMessageByUser()
    },
    handleRead(id) {
      console.log(id)
      updateMessageState({
        messId: id,
        state: 1
      }).then((res) => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-box {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}
.dashboard-editor-container {
  padding: 1px 11px;
  background-color: rgb(240, 242, 245);
  position: relative;
  height: calc(100vh - 50px);
  overflow-y: auto;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.chart-top-box {
  display: flex;
}
.top-route-box {
  display: flex;
  margin-top: 20px;
  div {
    border-radius: 4px;
    padding: 20px 20px;
    color: white;
    margin-right: 20px;
    cursor: pointer;
  }
}
.chart-right-box {
  background: #fff;
  padding: 16px 16px 0;
  border-radius: 8px;
  width: 67%;
}
.chart-right-box-first {
  background: #fff;
  padding: 16px 16px 0;
  border-radius: 8px;
}
.tab-box {
  width: 32%;
  background: #fff;
  border-radius: 8px;
  padding: 16px 16px 0;
  position: relative;
}
.message-page {
  position: absolute;
  bottom: 10px;
  left: 10px;
}
</style>
<style scoped>
div /deep/ .el-collapse-item__header {
  height: 33px;
  line-height: 33px;
}
div /deep/ .el-collapse-item__content {
  padding-bottom: 10px;
  padding-left: 3px;
}
.collapse-box {
  overflow-y: auto;
  max-height: 290px;
}
</style>
